* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

a{
    text-decoration: none;
    color: black;
}

.nav-box{
    width: 100%;
    height: 180px;

    background-image: url("nav-bg.avif");
    background-position: center;
    background-size: cover;
    position: relative;
    

    .cover{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .2);
         

    }

    .logo{
        position: absolute;
        bottom: 20px;
        left: 50px;
    }

    .navigation-wrapper{
        width: 100%;
        position: absolute;
        top: 20px;
        right: 50px;
      // padding: 20px;
      
        display: flex;
        align-items: center;
      

        .left{
            flex: 10;
            ul{
             display: flex;
             justify-content: row;
             list-style: none;
             margin-left: 100px;
     
             li{
                 margin-right: 15px;
                 a{
                     color: white;
                     font-size: 16px;
                 }
                 &:hover{
                    margin-top: -5px;
                    transition: all 0.1s linear;

                }
                 .download{
                     width: 22px;
                     height: 20px;
                     margin-top: 3px;
                    
                     
                 }
                 .ico{
                    width: 26px;
                    height: 24px;
                    margin-top: -3px;
                    

                 }
             }
            }
     }
     .center{
        flex: 4;
        height: 40px;
        width: 290px;
        background-color: #F1F2F3;
        display: flex;
        justify-content: space-evenly;
        border-radius: 10px;
        margin-right: 10px;
        //padding-left: 15px;
        //padding-right: 15px;

        &:hover{
            background-color: white;
        }

        &:hover input{
            background-color: white;
            
        }

        input{
            border: none;
            outline: none;
            font-size: 14px;
            background-color: #F1F2F3;
            margin-left: -70px;

        }


        img{
            width: 30px;
            margin-right: -70px;


        }
     
     }
     .right{
        display: flex;
        align-items: center;
        margin-left: 30px;
        flex: 6;
         .login{
            width: 45px;
            height: 45px;
            background-color: #00AEEC;
            border-radius: 23px;
            color: white;
            text-align: center;
            line-height: 46px;
         }

         .right-center{
            flex: 1;
            ul{
                display: flex;
                list-style: none;
                justify-content: space-evenly;
                li{
                    color: white;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 30px;
                    }
                    .big{
                        width: 35px;
                        margin-top: 5px;
                    }
                    span{
                        color: white;
                        font-size: 14px;
                    }
                    .big_1{
                        color: white;
                        margin-top: 2px;
                        font-size: 14px;
                    }
                    &:hover{
                        margin-top: -5px;
                        transition: all 0.1s linear;
                    }
                };
            }
         }

         .up{
            box-sizing: content-box;
            height: 46px;
            background-color: #FB7299;
            border-radius: 10px;
            display: flex;
            align-items: center;
            padding: 0px 20px;


            img{
                width: 25px;

            }
            span{
                color: white;
                font-size: 14px;
            }
         }
     }
    }
   
}

.center-box{
    width: 100%;
    padding: 0px 80px;

    .column{
        height: 100px;
        display: flex;
        align-items: center;
        .column-left{
            ul{
                list-style: none;
                display: flex;
                align-items: center;
                li{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    margin-right: 15px;
                    .icon_1{
                        width: 40px;
                        height: 40px;
                        background-color: #FF9212;
                        border-radius: 20px;
                        display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                        img{
                            width: 25px;
                            height: 25px;
                            
                        }
                    }
                    .icon_2{
                        width: 40px;
                        height: 40px;
                        background-color: #F07775;
                        border-radius: 20px;
                        display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                        img{
                            width: 25px;
                            height: 25px;
                            
                        }
                    }

                    span{
                        font-size: 15px;
                        margin-top: 10px;
                    }
                }
            }
        }
        .column-center{
            height: 66px;
            width: 900px;
            ul{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                list-style: none;
                width: 100%;
                height: 68px;
                position: relative;
                
                li{
                    //margin-bottom: 10px;
                    width: 73.5px;
                    height: 23.6px;
                    color: #61666D;
                    margin-right: 8px;
                    background-color: #F6F7F8;
                    border-radius: 10px;
                    //position: absolute;
                    //right: 20px;
                    text-align: center;
                    line-height: 24px;
                    font-size: 14px;

                    &:hover{
                        color: black;
                        background-color: #686c71;
                    }

                }
               
            }
        }
        .column-right{
            display: flex;
            align-items: center;
            .line{
                width: 2px;
                height: 68px;
                background-color: #18191C;
                margin-left: 20px;
                margin-right: 20px;

            }
            .content{
                //background-color: #00AEEC;
                ul{
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    list-style: none;
                    height: 88px;
                    margin-top: 10px;

                   
                    li{
                        height: 40px;
                        margin-right: 20px;
                        display: flex;
                        align-items: center;
                      

                        img{
                            width: 25px;
                            
                        }
                       

                           /* .good{
                                width: 20px;
                            }
                            .community{
                                width: 30px;
                            }*/
                        
                        span{
                            font-size: 14px;
                            margin-left: 5px;
                            color: #61666D;
                            &:hover{
                                color: #00AEEC;
                        }

                    }
                   

                     }

                }
            }
            
        }
    }
}
.botton-box{
    width: 100%;
    height: 363px;
    display: flex;
    

    .botton-left{
        flex: 4;
        width: 500px;
        height: 363px;
        background-image: url("白蛇电影海报.jpg (2).png");
        border-radius: 20px;
        margin-left: 80px;
        //position: relative;

      .ping{
        width: 500px;
        height: 28px;
        /*display: flex;
        flex-direction: row;
        justify-content: space-between;*/
        position: relative;
        span{

            color: #FFFFFF;
            font-size: 18px;
             position: absolute;
             top: 300px;
             left: 20px;
        }
        .img1{
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, 50%);
            border-radius: 10px;
            //position: absolute;
            margin-top: 8px;
            margin-left: 350px;

            img{
            width: 50px;
            height: 50px;
            margin-top: -10px;
            margin-left: -10px;
           
            }
        }
        .img2{
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, 50%);
            border-radius: 10px;
            //position: absolute;
            margin-top: 8px;
            margin-left: 400px;

            img{
            width: 30px;
            height: 30px;
            margin-top: 0px;
            margin-left: 0px;
           
            }
        }
      }

      .suspension{
        width: 144px;
        height: 16px;
        margin-bottom: 10px;
        position: relative;

        .one{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 10%;
            transform: translateX(30%);
            top: 265px;
        }
        

      }

    }

    .botton-right{
        height: 400px;
        margin: 0px 20px;
        flex: 6;
        position: relative;

       .part2{
        position: absolute;
        top:85px;
        right:85px;
        //padding-top: 20px;
        //margin-bottom: -50px;
        ul{
            display: flex;
            flex-direction: row;
            width: 700px;
            flex-wrap: wrap;
            align-content: space-between;
           // justify-content: space-between;
            //gap: 100px;
            margin-top: 100px;
            //margin-bottom: -500px;
            height: 189px;
            list-style: none;

            li{
               // margin: 10px;
                //margin-bottom: -10px;
                height: 17px;
                margin-right: 50px;
                display: flex;
                align-items: center;
                justify-content: left;

                img{
                    width: 45px;
                   // height: 20px;
                }

                span{
                    font-size: 13px;
                    margin-left: 5px;
                    color: #9499A0;
                    &:hover{
                        color: #00AEEC;
                        //transform: translateY(50px); /* 向下移动20px */
                        //transition: transform 0.3s ease;
                    }
                }
                &:hover{
                    transform: translateY(50px); /* 向下移动20px */
                        transition: transform 0.3s ease;
                }
            }

        }
       }

        .brick{
            position: absolute;
            top: 50px;
            //right:50px;
            //overflow: visible;

            ul{
                //width: 800px;
                //height: 420px;
                list-style: none;
                display: flex;/*为了设置li的宽高*/
                //align-items: center;
                position: relative;
                li{
                    position: absolute;
                    top: -30px;
                    width: 800px;
                    height: 500px;
                    //height:450px;
                    display: flex;
                    align-content: space-between;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    //position: relative;//给图定位的
                    //margin-top: 0px;
                    //margin-bottom: -10px;
                    //padding: 20px;
                    //margin-right: 20px;
                    .video-container1 {
                       position: relative;//给图定位的
                        //margin: -10px;
                        //position: relative;
                        //display: inline-block;
                        width: 250px;
                        height: 145px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                       
                       /* width: 250px;
                        height: 145px; 
                        margin: 5px; 
                        border-radius: 20px; 
                        */
                        //overflow: hidden; /* 防止内容溢出 */
                     .myVideo {
                        width: 240px; /* 视频的宽度 */
                        height: 140px; /* 视频的高度 */
                        margin: 0px 10px; /* 与上下左右的边距 */
                        border-radius: 10px; /* 圆角效果 */
                        opacity: 0;
                        transform: scale(0);
                        transition: opacity 0.3s, transform 0.3s ease-out;
                        object-fit: fill; /* 确保视频填充容器 */
                    }
                    span{

                        color: #18191C;
                        font-size: 15px;
                        //line-height: 1.5;
                        font-weight: 550;
                    }
                    
                     .video-placeholder {
                        position: absolute;
                        width: 240px; /* 视频的宽度 */
                        height: 140px;
                        bottom: 20px;
                              //width: 100%;
                              //height: auto;
                              display: block;
                              border-radius: 10px;
                                          }

                                                        
                    
                    }
                
                    .video-container2 {
                        position: relative;//给图定位的
                        //position: relative;
                        //display: inline-block;
                        width: 250px;
                        height: 145px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                       
                       /* width: 250px;
                        height: 145px; 
                        margin: 5px; 
                        border-radius: 20px; 
                        */
                        //overflow: hidden; /* 防止内容溢出 */
                     .myVideo {
                        width: 240px; /* 视频的宽度 */
                        height: 135px; /* 视频的高度 */
                        margin: 0px 10px; /* 与上下左右的边距 */
                        border-radius: 10px; /* 圆角效果 */
                        opacity: 0;
                        transform: scale(0);
                        transition: opacity 0.3s, transform 0.3s ease-out;
                        object-fit: fill; /* 确保视频填充容器 */
                    }
                    span{
                        color: #18191C;
                        font-size: 15px;
                        font-weight: 550;
                    }

                    
                          .video-placeholder {
                            position: absolute;
                        width: 240px; /* 视频的宽度 */
                        height: 140px;
                        bottom: 20px;
                                 //width: 100%;
                                //height: auto;
                                display: block;
                                border-radius: 10px;
                                              }
                                            
                    
                    }
                
                    .video-container3 {
                        position: relative;//给图定位的
                        //position: relative;
                        //display: inline-block;
                        width: 250px;
                        height: 145px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                       
                       /* width: 250px;
                        height: 145px; 
                        margin: 5px; 
                        border-radius: 20px; 
                        */
                        //overflow: hidden; /* 防止内容溢出 */

                        
                     .video-placeholder {
                        position: absolute;
                        width: 240px; /* 视频的宽度 */
                        height: 140px;
                        bottom: 20px;
                               //width: 100%;
                               //height: auto;
                               display: block;
                               border-radius: 10px;
                                               }


                     .myVideo {
                        width: 240px; /* 视频的宽度 */
                        height: 135px; /* 视频的高度 */
                        margin: 0px 10px; /* 与上下左右的边距 */
                        border-radius: 10px; /* 圆角效果 */
                        opacity: 0;
                        transform: scale(0);
                        transition: opacity 0.3s, transform 0.3s ease-out;
                        object-fit: fill; /* 确保视频填充容器 */
                    }
                    span{
                        color: #18191C;
                        font-size: 15px;
                        font-weight: 550;
                    }

                 
                    
                    }
                
                    .video-container4 {
                        position: relative;//给图定位的
                        //position: relative;
                        //display: inline-block;
                        margin-bottom: 120px;
                        width: 250px;
                        height: 145px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                       
                       /* width: 250px;
                        height: 145px; 
                        margin: 5px; 
                        border-radius: 20px; 
                        */
                        //overflow: hidden; /* 防止内容溢出 */
                     .myVideo {
                        width: 240px; /* 视频的宽度 */
                        height: 135px; /* 视频的高度 */
                        margin: 0px 10px; /* 与上下左右的边距 */
                        border-radius: 10px; /* 圆角效果 */
                        opacity: 0;
                        transform: scale(0);
                        transition: opacity 0.3s, transform 0.3s ease-out;
                        object-fit: fill; /* 确保视频填充容器 */
                    }
                    span{
                        color: #18191C;
                        font-size: 15px;
                        font-weight: 550;
                    }

                        
                          .video-placeholder {
                            position: absolute;
                        width: 240px; /* 视频的宽度 */
                        height: 140px;
                        bottom: 45px;
                              //width: 100%;
                              //height: auto;
                             display: block;
                             border-radius: 10px;
                                       }

                                   

                    
                    }
                
                    .video-container5 {
                        position: relative;//给图定位的
                        //position: relative;
                        //display: inline-block;
                        margin-bottom: 120px;
                        width: 250px;
                        height: 145px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                       
                       /* width: 250px;
                        height: 145px; 
                        margin: 5px; 
                        border-radius: 20px; 
                        */
                        //overflow: hidden; /* 防止内容溢出 */
                     .myVideo {
                        width: 240px; /* 视频的宽度 */
                        height: 135px; /* 视频的高度 */
                        margin: 0px 10px; /* 与上下左右的边距 */
                       // margin: 0px 10px; /* 与上下左右的边距 */
                        border-radius: 10px; /* 圆角效果 */
                        opacity: 0;
                        transform: scale(0);
                        transition: opacity 0.3s, transform 0.3s ease-out;
                        object-fit: fill; /* 确保视频填充容器 */
                    }
                    span{
                        color: #18191C;
                        font-size: 15px;
                        font-weight: 550;
                    }
                    
                          .video-placeholder {
                            position: absolute;
                        width: 240px; /* 视频的宽度 */
                        height: 140px;
                        bottom: 45px;
                            // width: 100%;
                             //height: auto;
                             display: block;
                             border-radius: 10px;
                            }

                           
                    
                    }
                
                    .video-container6 {
                        position: relative;//给图定位的
                        //position: relative;
                        //display: inline-block;
                       // margin:10px;
                       margin-bottom: 120px;
                        width: 250px;
                        height: 145px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                       
                       /* width: 250px;
                        height: 145px; 
                        margin: 5px; 
                        border-radius: 20px; 
                        */
                        //overflow: hidden; /* 防止内容溢出 */
                     .myVideo {
                        width: 240px; /* 视频的宽度 */
                        height: 135px; /* 视频的高度 */
                        margin: 0px 10px; /* 与上下左右的边距 */
                        border-radius: 10px; /* 圆角效果 */
                        opacity: 0;
                        transform: scale(0);
                        transition: opacity 0.3s, transform 0.3s ease-out;
                        object-fit: fill; /* 确保视频填充容器 */
                    }
                    span{
                        color: #18191C;
                        font-size: 15px;
                        font-weight: 550;
                    }

                    
                           .video-placeholder {
                            position: absolute;
                        width: 240px; /* 视频的宽度 */
                        height: 140px;
                        bottom: 45px;
                               //width: 100%;
                               //height: auto;
                               display: block;
                               border-radius: 10px;
                                               }

                                             
                    
                    }
                
                   
                }
            }
        }
        
        

    }
}
